<template>
  <!-- PC端使用el-table -->
  <el-table
    v-if="isDesktop"
    v-bind="tableProps"
    @selection-change="handleSelectionChange"
  >
    <template v-for="item in Object.keys($slots)" #[item]="data" :key="item">
      <slot :name="item" v-bind="data || {}"></slot>
    </template>
  </el-table>

  <!-- 移动端使用CardTable -->
  <CardTable
    v-else
    v-bind="tableProps"
    @selection-change="handleSelectionChange"
  >
    <!-- 默认插槽 - 用于传递el-table-column -->
    <template #default>
      <slot></slot>
    </template>

    <!-- 其他命名插槽 -->
    <template #empty-bottom>
      <slot name="empty-bottom"></slot>
    </template>
    <!-- 根据CardTable的插槽需求添加相应的命名插槽 -->
  </CardTable>
</template>

<script>
  import { ref, computed, onMounted, onUnmounted } from 'vue'
  import { ElTable } from 'element-plus'
  import CardTable from '../CardTable/index.vue'

  import useAppStore from "@/store/modules/app"
  const appStore = useAppStore();
  export default {
    name: 'SmartTable',
    components: {
      ElTable,
      CardTable
    },
    inheritAttrs: false,
    props: {
      // 移动端和PC端的切换阈值（单位：像素）
      breakpoint: {
        type: Number,
        default: 768
      },
      // 强制使用某种表格类型 (desktop/mobile)
      forceType: {
        type: String,
        default: '',
        validator: (value) => {
          return ['', 'desktop', 'mobile'].includes(value)
        }
      },
      // 以下是从ElTable和CardTable继承的常用属性
      // 实际使用时可以根据需要扩展更多属性
      data: {
        type: Array,
        default: () => []
      },
      loading: {
        type: Boolean,
        default: false
      },
      border: {
        type: Boolean,
        default: false
      },
      stripe: {
        type: Boolean,
        default: false
      },
      rowKey: {
        type: [String, Function],
        default: 'id'
      },
      emptyText: {
        type: String
      }
    },
    emits: [
      // 表格常见事件
      'selection-change',
      'select',
      'select-all',
      'row-click',
      'row-dblclick',
      'cell-click',
      'cell-dblclick',
      'header-click',
      'sort-change',
      'filter-change'
    ],
    setup(props, { attrs, slots, emit }) {
      // 响应式引用存储当前是否为桌面端
      const isDesktop = ref(appStore.device === 'desktop')

      // 计算设备类型
      const checkDeviceType = () => {
        if (props.forceType) {
          isDesktop.value = props.forceType === 'desktop'
          return
        }

        // 通过窗口宽度判断设备类型
        const width = window.innerWidth
        isDesktop.value = width >= props.breakpoint
      }

      // 处理resize事件
      const handleResize = () => {
        checkDeviceType()
      }

      // 提取表格属性（排除特定属性）
      const tableProps = computed(() => {
        const { breakpoint, forceType, ...tableProps } = { ...props, ...attrs }
        return tableProps
      })

      // 表格事件处理
      const handleSelectionChange = (val) => {
        emit('selection-change', val)
      }

      // 生命周期钩子
      onMounted(() => {
        checkDeviceType()
        window.addEventListener('resize', handleResize)
      })

      onUnmounted(() => {
        window.removeEventListener('resize', handleResize)
      })

      return {
        isDesktop,
        tableProps,
        handleSelectionChange
      }
    }
  }
</script>

<style scoped>
</style>
